<template>
  <div class="songs-info">
    <div class="songlist" v-for="(item,index) in data" :key="index"
      @click="itemClick(item,index)">
      <div class="songs-l">
        <span>{{ item.name }}</span>
        <span>{{ item.al.name }}</span>
      </div>
      <div class="songs-r">
        <span>
          <svg t="1639638851837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6449" width="200" height="200"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" p-id="6450"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" p-id="6451"></path></svg>
        </span>
        <span>
          <svg t="1639638922387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8665" width="200" height="200"><path d="M365.066 197.39c0 0 0 0 0 0 0 58.569 47.479 106.048 106.048 106.048 58.569 0 106.048-47.479 106.048-106.048 0 0 0 0 0 0 0-58.569-47.479-106.048-106.048-106.048-58.569 0-106.048 47.479-106.048 106.048 0 0 0 0 0 0z" fill="" p-id="8666"></path><path d="M365.066 512c0 0 0 0 0 0 0 58.569 47.479 106.048 106.048 106.048 58.569 0 106.048-47.479 106.048-106.048 0 0 0 0 0 0 0-58.569-47.479-106.048-106.048-106.048-58.569 0-106.048 47.479-106.048 106.048 0 0 0 0 0 0z" fill="" p-id="8667"></path><path d="M365.066 826.61c0 0 0 0 0 0 0 58.569 47.479 106.048 106.048 106.048 58.569 0 106.048-47.479 106.048-106.048 0 0 0 0 0 0 0-58.569-47.479-106.048-106.048-106.048-58.569 0-106.048 47.479-106.048 106.048 0 0 0 0 0 0z" fill="" p-id="8668"></path></svg>
        </span>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20" 
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data: Array,
      totalCount:Number,
    },

    data() {
      return {
        currentPage:1,
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pagechange',val);
      },

      itemClick(item,index){
        // console.log(item);
        this.$router.push({path: '/player/' + item.id})
      }
    }
  }
</script>

<style scoped>
.songs-info{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.songlist{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

.songs-l{
  display: flex;
  flex-direction: column;
  width: 80%;
  /* font-size: 13px; */
}

.songs-l span:first-child{
  font-size: 15px;
}

.songs-l span:last-child{
  font-size: 10px;
}

.songs-r{
  font-size: 0.6em;
}
</style>